import React, { memo, useEffect } from 'react'
import { useDispatch, useSelector, shallowEqual } from 'react-redux'

import { getHotRecommendAction } from '../../store/actionCreators'

import { HotRecommendWrapper } from './style'
import MSNThemeHeaderRCM from '@/components/theme-header-rcm'
import MSNSongsCover from '@/components/songs-cover'

const MSNHotRecommend = memo(() => {
// state

// redux hooks
const { hotRecommends } = useSelector(state => ({
  hotRecommends: state.get("recommend").get("hotRecommends")
}), shallowEqual)
const dispatch = useDispatch();

// other hooks
useEffect(()=>{
  dispatch(getHotRecommendAction(8))
},[dispatch])
  return (
    <HotRecommendWrapper>
      <MSNThemeHeaderRCM title="热门推荐" keywords={['华语', '流行', '民谣', '摇滚', '电子']}/>
      <div className='recommend-list'>
        {
          hotRecommends.map((item, index) =>{
            return <MSNSongsCover key={item.id} info={item}/>
          })
        }
      </div>
    </HotRecommendWrapper>
  )
})

export default MSNHotRecommend